<!-- resources/view/home.html -->
{extend name="layout/base" /}
{block name="title"}在线时间戳{/block}

{block name="header"}
    <h1>这是首页头部</h1>
{/block}
{block name="content"}
    <div id="app">
        <el-row>
            <el-col :span="10">
                <div  style="float: left;">
                    <el-input v-model="sjc" placeholder="请输入时间戳"></el-input>
                </div>
                <div style="float: left;">
                    <el-button style="display: flex;" @click="convertTimestamp()">转换>></el-button>
                </div>
                <div  style="float: left;">
                    <el-input v-model="rq" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
      
        </el-row>
       
    </div>
    <script>
        // import {Menu,MenuItem} from 'element-ui';
        // import Element from 'element-ui';
        // Vue.use(Element);
        new Vue({
            el: '#app',
            data: function () {
                return {
                    visible: false,
                    // sjc: 1710944822,
                    sjc: Math.round(new Date().getTime() / 1000),
                    rq:''
                }
            },
            methods: {
                convertTimestamp() {
                    var sjc = this.sjc
                    // 验证输入是否为数字  
                    if (isNaN(sjc)) {  
                    alert('请输入有效的数字时间戳');  
                    return;  
                    }  
                    
                    // 将时间戳转换为日期对象  
                    let date = new Date(parseInt(sjc) * 1000);  
                    
                    // 格式化日期为字符串  
                    let outputValue = date.toLocaleString();  
                    let newStr = outputValue.replace(/\//g, '-'); 
                    // 设置输出框的值  
                    this.rq=newStr
                }
            }
        })
    
    </script>
{/block}
